<template>
  <div class="treasure-hunter-container">
    <el-card class="game-card">
      <template #header>
        <div class="card-header">
          <h1>数字宝藏猎人</h1>
        </div>
      </template>

      <!-- 游戏状态 -->
      <div class="game-status">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-statistic title="难度" :value="difficulty" />
          </el-col>
          <el-col :span="12">
            <el-statistic title="积分" :value="score" />
          </el-col>
        </el-row>
      </div>

      <!-- 游戏地图 -->
      <div class="game-map">
        <el-row :gutter="10">
          <el-col 
            v-for="(tile, index) in gameMap" 
            :key="index" 
            :span="6"
            class="map-tile"
          >
            <el-button 
              :type="getTileType(tile)" 
              :disabled="tile.revealed"
              @click="selectTile(index)"
              size="large"
              class="tile-button"
            >
              {{ getTileContent(tile) }}
            </el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 游戏控制 -->
      <div class="game-controls">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-button 
              type="success" 
              @click="startGame" 
              size="large" 
              class="full-width"
            >
              开始游戏
            </el-button>
          </el-col>
          <el-col :span="12">
            <el-button 
              type="danger" 
              @click="resetGame" 
              size="large" 
              class="full-width"
            >
              重置游戏
            </el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 难度选择 -->
      <div class="difficulty-selector">
        <el-select 
          v-model="difficulty" 
          placeholder="选择游戏难度"
          @change="initGameMap"
          class="full-width"
        >
          <el-option 
            v-for="(config, level) in difficulties" 
            :key="level"
            :label="level" 
            :value="level"
          />
        </el-select>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { 
  ElMessage, 
  ElNotification 
} from 'element-plus'

// 游戏难度配置
const difficulties = {
  简单: { mapSize: 16, treasureCount: 3 },
  中等: { mapSize: 16, treasureCount: 5 },
  困难: { mapSize: 16, treasureCount: 7 }
}

const difficulty = ref('中等')
const score = ref(0)
const gameMap = ref([])

// 获取格子类型
const getTileType = (tile) => {
  if (!tile.revealed) return 'info'
  return tile.hasTreasure ? 'success' : 'danger'
}

// 获取格子内容
const getTileContent = (tile) => {
  if (!tile.revealed) return '?'
  return tile.hasTreasure ? '🏆' : '❌'
}

// 初始化游戏地图
const initGameMap = () => {
  const config = difficulties[difficulty.value]
  gameMap.value = Array(config.mapSize).fill().map(() => ({
    revealed: false,
    hasTreasure: false
  }))

  // 随机放置宝藏
  let treasuresPlaced = 0
  while (treasuresPlaced < config.treasureCount) {
    const randomIndex = Math.floor(Math.random() * config.mapSize)
    if (!gameMap.value[randomIndex].hasTreasure) {
      gameMap.value[randomIndex].hasTreasure = true
      treasuresPlaced++
    }
  }

  ElNotification({
    title: '游戏提示',
    message: `已生成${difficulty.value}难度地图`,
    type: 'info'
  })
}

// 选择地图格子
const selectTile = (index) => {
  if (gameMap.value[index].revealed) return

  gameMap.value[index].revealed = true
  
  if (gameMap.value[index].hasTreasure) {
    score.value += 10
    ElMessage({
      message: '恭喜你找到宝藏！+10分',
      type: 'success'
    })
  } else {
    score.value = Math.max(0, score.value - 5)
    ElMessage({
      message: '很遗憾，未找到宝藏。-5分',
      type: 'warning'
    })
  }

  // 检查游戏是否结束
  checkGameStatus()
}

// 检查游戏状态
const checkGameStatus = () => {
  const remainingTreasures = gameMap.value.filter(tile => tile.hasTreasure && !tile.revealed).length
  
  if (remainingTreasures === 0) {
    ElNotification({
      title: '游戏结束',
      message: `你的最终得分：${score.value}分`,
      type: 'success'
    })
  }
}

// 开始游戏
const startGame = () => {
  score.value = 0
  initGameMap()
}

// 重置游戏
const resetGame = () => {
  score.value = 0
  initGameMap()
  ElMessage({
    message: '游戏已重置',
    type: 'info'
  })
}

// 初始化游戏
onMounted(() => {
  initGameMap()
})
</script>

<style scoped>
.treasure-hunter-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5;
}

.game-card {
  width: 600px;
  text-align: center;
}

.card-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-status {
  margin: 20px 0;
}

.game-map {
  margin: 20px 0;
}

.map-tile {
  margin-bottom: 10px;
}

.tile-button {
  width: 100%;
  height: 80px;
}

.full-width {
  width: 100%;
}

.difficulty-selector {
  margin-top: 20px;
}

/* 响应式调整 */
@media screen and (max-width: 680px) {
  .game-card {
    width: 95%;
    margin: 0 10px;
  }

  .tile-button {
    height: 60px;
  }
}
</style>